<template>
  <a-tabs @change="change" :activeKey="activeKey" v-if="items.length > 0">
    <a-tab-pane v-for="item in items" :key="item.key">
      <template slot="tab">
        <a-badge
          v-if="item.count"
          :count="item.count"
          style="padding-right:11px"
          >{{ item.name }}</a-badge
        >
        <span v-else>{{ item.name }}</span>
        <a-tooltip v-if="item.info">
          <template slot="title">{{ item.info }}</template>
          <a-icon type="info-circle" />
        </a-tooltip>
      </template>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
    // activeKey: {
    //   type: String | Number,
    //   default: ''
    // }
  },
  data () {
    return {
      activeKey: ''
    }
  },
  mounted () {
    this.active()
  },
  methods: {
    change (key) {
      this.activeKey = key
      this.$emit('change', key)
    },
    active () {
      let item = this.items.find(item => item.active) || this.items[0]
      if (item && item.key) {
        this.activeKey = item.key
      }
    }
  },
  watch: {
    items: function (val) {
      this.active()
    }
  }
}
</script>

<style></style>
